<template>
  <div class="chart-wrapper" :style="{ width: '100%', height: height + 'px' }">
    <div class="chart" :style="{ height: height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { COLOR_PLATE } from "@/config/global";
import { calculateColorBrightness } from "@/lib/extension";
export default {
  name: "",
  data() {
    return {
      option: {},
      chartObj: null,
      useDualTheme: true,
      theme: "night",
      ratio: JSON.parse(localStorage.ratio),
    };
  },
  props: {
    id: {
      type: String,
      required: true,
      default: null,
    },
    chartData: {
      type: Object,
      required: true,
    },
    chartColors: {
      type: Array,
      default: () => new Array("#22a656", "#fcd873"),
    },
    height: {
      type: Number,
      default: 250,
    },
    xAxisName: {
      type: String,
    },
    yAxisName: {
      type: String,
    },
    type: {
      type: String,
      default: "horizontal",
    },
  },
  watch: {
    chartData: {
      handler(n, o) {
        if (n !== o) {
          this.updateChart();
        }
        console.log(n);
      },
      immediate: true,
      deep: true,
    },
    id: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    chartColors: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    height: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    xAxisName: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    yAxisName: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    type: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
  },
  mounted() {
    // this.renderChart();
  },
  methods: {
    updateChart() {
      this.$nextTick(() => {
        if (this.chartObj) {
          this.chartObj.setOption(this.option);
        } else {
          this.renderChart();
        }
      });
    },
    renderChart() {
      let classNames = Object.keys(this.chartData);
      let nodes = Object.values(this.chartData);
      let node = nodes[0];
      if (node) {
        this.option = {
          tooltip: {
            trigger: "axis",
            formatter: "{b0}: {c0}",
            axisPointer: {
              type: "shadow",
              label: {
                backgroundColor: "#6a7985",
              },
            },
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontSize: 12 * this.ratio,
            },
          },
          legend: {
            show: true,
            icon: "rect",
            itemWidth: 10,
            itemHeight: 10,
            orient: "horizontal",
            left: 0,
            top: 10 * this.ratio,
            textStyle: {
              color: this.theme === "night" ? "white" : "#333",
              fontSize: 12 * this.ratio,
            },
            data: classNames,
          },
          grid: {
            top: 40 * this.ratio,
            left: 5 * this.ratio,
            right: 10 * this.ratio,
            bottom: 5 * this.ratio,
            containLabel: true,
          },
          yAxis: {
            name: this.yAxisName,
            nameTextStyle: {
              color: this.theme === "night" ? "#fff" : "#333",
            },
            axisLine: { show: false },
            // boundaryGap:false,
            axisTick: {
              show: false,
              lineStyle: {
                color: this.theme === "night" ? "#ffffff99" : "#00000099",
              },
            },
            axisLabel: {
              show: true,
              color: this.theme === "night" ? "#fff" : "#333",
              fontSize: 12 * this.ratio,
            },
            splitLine: { show: false },
            type: this.type === "horizontal" ? "category" : "value",
            data:
              this.type === "horizontal" ? node.map((o) => o.name) : undefined,
          },
          xAxis: {
            name: this.xAxisName,
            boudaryGap: false,
            nameTextStyle: {
              color: this.theme === "night" ? "#fff" : "#333",
            },
            axisLine: { show: false },
            axisTick: {
              show: false,
              lineStyle: {
                color: this.theme === "night" ? "#ffffff99" : "#00000099",
              },
            },
            axisLabel: {
              show: true,
              color: this.theme === "night" ? "#fff" : "#333",
              fontSize: 12 * this.ratio,
            },
            splitLine: { show: false },
            type: this.type === "horizontal" ? "value" : "category",
            data:
              this.type === "horizontal" ? undefined : node.map((o) => o.name),
          },
          series: nodes.map((o, i) => {
            return {
              name: classNames[i],
              type: "bar",
              data: o,
              barWidth: "20%",
              barGap: "35%",
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: this.type === "horizontal" ? 1 : 0,
                    y2: this.type === "horizontal" ? 0 : 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: this.chartColors[i],
                      },
                      {
                        offset: 0.8,
                        color: this.chartColors[i] + "00",
                      },
                    ],
                  },
                },
              },
              label: {
                show: false,
              },
            };
          }),
        };
        let chartDom = document.getElementById(this.id);
        this.chartObj = echarts.init(chartDom);
        this.chartObj.setOption(this.option);
        this.chartObj.resize();
        window.resize = function () {
          this.chartObj.resize();
        };
      }
    },
    calculateLabelPosition(index, length) {
      let position = "";
      if (this.type === "horizontal") {
        if (index < length - 1) {
          position = "inside";
        } else {
          position = "right";
        }
      } else {
        if (index < length - 1) {
          position = "inside";
        } else {
          position = "top";
        }
      }
      return position;
    },
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
}
</style>